import { useState } from 'react';
import { useTheme } from '@mui/material/styles';
import { Rate } from "react-vant";

function StarRating({ rating, itemId, onRatingChange }) {
    const theme = useTheme();
    const [value, setValue] = useState(rating || 0);
    
    const ratingChange = (newRating) => {
        setValue(newRating);
        onRatingChange(itemId, newRating);
    };

    return (
        <Rate 
            gutter="5vw" 
            size="32" 
            color={theme.palette.primary.main} 
            voidColor={theme.palette.action.disabled} 
            value={value} 
            onChange={ratingChange}
        />
    );
}

export default StarRating;